<template>
  <a href="" class="m-consultation">
    <!--<div class="rect">-->
    <div class="icon"></div>
      <div class="consult">咨询</div>
    <!--</div>-->
  </a>
</template>
<script>
  export default {
    name: 'm-consultation',
    data () {
      return {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .m-consultation{
    width: 1rem;
    height:1rem;
    background: rgba(255,255,255,0.95);
    border: 0 solid #D7D7D7;
    -webkit-box-shadow: 0 0 0.12rem 0 rgba(0,0,0,0.20);
    -moz-box-shadow: 0 0 0.12rem 0 rgba(0,0,0,0.20);
    box-shadow: 0 0 0.12rem 0 rgba(0,0,0,0.20);
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    position: fixed;
    right: 0.33rem;
    bottom:1.88rem;
    text-align: center;
  }
  .icon{
    width: 0.32rem;
    height: 0.32rem;
    position: absolute;
    left: 0.34rem;
    top:0.16rem;
  }
  .consult{
    font-size: 0.24rem;
    color: #FF6633;
    position: absolute;
    left: 0.25rem;
    bottom:0.19rem;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 1),
  only screen and (min--moz-device-pixel-ratio: 1),
  only screen and (-o-min-device-pixel-ratio: 1/1),
  only screen and (min-device-pixel-ratio: 1){
    .icon{
      background-image: url("../../assets/image/Group 3.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min-device-pixel-ratio: 1.5){
    .icon{
      background-image: url("../../assets/image/Group 3@2x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min-device-pixel-ratio: 2){
    .icon{
      background-image: url("../../assets/image/Group 3@3x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
</style>
